<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片检测系统</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        .container {
            width: 1200px;
            margin: 50px auto;
            font-family: Arial, sans-serif;
        }
        .button-group {
            text-align: center;
            margin-bottom: 30px;
        }
        .button {
            background: #4CAF50;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 0 10px;
        }
        .button:hover {
            background: #45a049;
        }
        .image-container {
            display: flex;
            gap: 20px;
        }
        .image-box {
            flex: 1;
            border: 1px solid #ddd;
            padding: 15px;
            min-height: 400px;
        }
        .image-preview {
            max-width: 100%;
            max-height: 400px;
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="button-group">
        <!--自定义的按钮点一下我们就出发input文件上传的方法-->
        <!--onclick:获取input文件的上传方式-->
        <button class="button" onclick="document.getElementById('fileInput').click()">图片上传</button>
        <button id="detectBtn" class="button"  onclick="getImage()">图片检测</button>
    </div>
    <input type="file" id="fileInput" accept="image/*" hidden>   <!--默认的图片或文件上传的按钮--> <!--hidden隐藏 accept:只能上传图片类型的数据-->
    <div class="image-container">
        <div class="image-box">
            <h3>原始图片</h3>
            <img id="originalPreview" class="image-preview" alt="原始图片预览">
        </div>
        <div class="image-box">
            <h3>检测结果</h3>
            <img id="resultPreview" class="image-preview" alt="检测结果预览">
        </div>
    </div>
</div>
</body>
<script>
    //完成图片上传的操作
    $('#fileInput').on('change',function (){
        //获取用户上传的图片
        const file = this.files[0];
        //在页面上显示用户的图片
        const reader = new FileReader();  //FileReader 是js提供的一个对文件进行操作的类
        reader.readAsDataURL(file);
        reader.onload = function (e){
            $('#originalPreview').attr('src',e.target.result).show();
        }
        //上传之前需要对图片进行转换
        const  fromData = new FormData();
        fromData.append("file",file);
        console.log(fromData)

        //将图片进行上传
        $.ajax({
            url:'/uploadImage',
            type: 'POST',
            data: fromData,
            contentType:false,//浏览器自动识别上传的类型
            processData: false,
            success: function (){
            },
            error:function (){
            }
        })
    })

    /**
     * 获取图片信息
     */
    function getImage(){
        $("#resultPreview").attr('src','').hide();
        $.ajax({
            url: "/getImage",
            type: 'GET',
            dataType: 'json',
            success:function (data){
                console.log(data.imagePath)
                $("#resultPreview").attr('src',data.imagePath+'?t='+new Date().getTime()).show();
            },
            error: function(xhr) {
                console.error('请求失败:', xhr.statusText);
                alert('检测失败');
            }
        })
    }
</script>
</html>